<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>定位</title>
  <style type="text/css">
    pre {
      font-size: 17px
    }
    #div1 {
      position: absolute;
      left: 23%;
      border: 1px solid;
      width: 700px;
      height: 400px;
    }
    #div2, #div3, #div4, #div6 {
      border: 1px solid;
      background-color: black;
      color: white;
      width: 20%;
      height: 20%;
    }
    #div2, #div4 {
      position: absolute;
    }
    #div3, #div6 {
      position: relative;
    }
    #div5, #div7 {
      border: 1px solid;
      background-color: black;
      color: white;
      position: fixed;
      /* 如果位置是固定定位，那么当使用百分比表示宽度或高度时的参照物是浏览器窗口 */
      width: 140px;
      height: 80px;
    }
    #div2 {
      top: 16.666%;
      left: 8.333%;
    }
    #div3 {
      top: 170px;
    }
    #div5 {
      bottom: 320px;
      left: 680px;
    }
    #div6 {
      left: 400px;
    }
    #div7 {
      top: 300px;
      right: 480px;
    }
    #div6, #div7 {
      z-index: -1;
    }
  </style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
  <thead>
    <th>定位</th>
    <th>英文</th>
    <th>说明</th>
  </thead>
  <tbody>
    <tr>
      <td>静态</td>
      <td>static</td>
      <td>默认值，元素按照文档的正常流程进行定位，top，bottom，left，right和z-index属性对其无效</td>
    </tr>
    <tr>
      <td>绝对</td>
      <td>absolute</td>
      <td>
        元素会被移出正常文档流，不会为元素预留空间，通过相对于最近的非static定位祖先元素的偏移，确定元素位置<br>
        绝对定位的元素可以设置外边距，且不会与其他边距合并
      </td>
    </tr>
    <tr>
      <td>固定</td>
      <td>fixed</td>
      <td>
        元素会被移出正常文档流，不会为元素预留空间，通过相对于屏幕视口（viewport）的位置，指定元素位置<br>
        元素会出现在的每页的固定位置，该位置在屏幕滚动时不会改变<br>
        当元素祖先的transform，perspective或filter属性非none时，容器由视口改为该祖先
      </td>
    </tr>
    <tr>
      <td>相对</td>
      <td>relative</td>
      <td>
        元素根据文档的正常流程进行定位，然后根据上、右、下、左的值相对自身进行偏移<br>
        偏移不会影响任何其他元素的位置
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">position属性用于指定一个元素在文档中的定位方式，top，right，bottom和left属性则决定该元素的最终位置</td>
    </tr>
  </tfoot>
</table>
<div id="div1">
  框1占据行内容器的第一行
  <div id="div2">框2<br>绝对定位，不再保留移动后的原位置</div>
  <div id="div3">框3<br>相对定位，将保留移动后的原位置</div>
  <div id="div4">框4<br>绝对定位，未移动</div>
  <div id="div5">框5<br>固定定位，不再保留移动后的原位置</div>
  <div id="div6">框6<br>相对定位，将保留移动后的原位置</div>
  <div id="div7">框7<br>固定定位，将保留移动后的原位置</div>
</div>
<div style="position: fixed; top: 0; right: 0">
框2、3、4、6的大小一致<br>
框5、7的大小一致<br>
框1内部的元素排列顺序为2、3、4、5、6、7<br>
框6、7位于-1层（z-index值为1）<br>
</div>
</body>
</html>